import React, {Component} from 'react'
import {inject, observer} from 'mobx-react';
import {observable,action,toJS} from 'mobx';
import {Select, Modal, Button, Tooltip} from 'antd'
const Option = Select.Option

import {WeaInputSearch} from 'ecCom'

import WeaSplitLine from "../../../Component/wea-split-line"

import { WeaLocaleProvider } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

@inject('blogMyBlog')
@observer
class TopSearchPanel extends Component {
    constructor(props) {
        super(props)
        this.state = this.initData(props)
    }

    initData = (props) => {
        return {
            groupId: props.defaultGroup.groupId || 'all',
            groupName: props.defaultGroup.groupName || getLabel(384389,"全部关注"),
            content: '',
        }
    }

    get data() {
        return this.state;
    }

    componentWillReceiveProps(props) {
        this.setState({
            groupId: props.defaultGroup.groupId,
            groupName: props.defaultGroup.groupName
        })
    }

    render() {
        let {content, groupId, groupName} = this.state,
            {groupsBefore, groupsAfter} = this.props;
        const {moduleStatus,getBlogGroupAddCondition } = this.props.blogMyBlog;
        return (
            <div className="wea-fans-top-search-panel">
                <div className="wea-ftsp-item wea-ftsp-search">
                    <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@puba70`}
                        placeholder=""
                        value={content}
                        onSearchChange={this.onSearchChange}
                        onSearch={this.onSearch}
                        style={{width: '125px'}}
                    />
                </div>
            </div>
        )
    }


    deleteGroup = () => {
        const {deleteGroup, getAttentionList } = this.props.blogMyBlog
        
        let {groupId, groupName} = this.state
        const modal = Modal.confirm({
            title: getLabel(131329,'信息确认'),
            content: (<div><p>{getLabel(384343,"确定要删除分组吗？")}</p><p>{getLabel(384458,"删除后，此分组下的人员将移至'未分组'列表。")}</p></div>),
            okText: `${getLabel(382958,'确定')}`,
            cancelText:`${getLabel(31129,'取消')}`,
            onOk: () => {
                deleteGroup(
                    {groupId: groupId, groupName: groupName},
                    result => {
                        if (result.status == "1") {
                            getAttentionList(
                                {groupId: "nogroup"},
                                this.setState({groupId: "nogroup", groupName: getLabel(81307,"未分组")})
                            )
                            this.props.changeGroup({groupId: "nogroup", groupName: getLabel(81307,"未分组")})
                        }
                    }
                )
                modal.destroy()
            },
            onCancel: () => {
            }
        })
    }

    onSelect = (value) => {
        const {getAttentionList,moduleStatus,getBlogGroupAddCondition } = this.props.blogMyBlog
        if (value == "new") {
            getBlogGroupAddCondition();
            moduleStatus.createOrEdit='create';
            moduleStatus.showGroupCreate=true;
        } else {
            const values = value.split("_")
            this.setState({groupId: values[0], groupName: values[1], content: ""})
            getAttentionList({groupId: values[0]})
            this.props.changeGroup({groupId: values[0], groupName: values[1]})
        }
    }

    onSearchChange = (value) => {
        this.setState({content: value})
    }
    onSearch = () => {
        const {getShareToMeUserList } = this.props.blogMyBlog
        
        this.setState({groupId: "all", groupName: getLabel(384389,"全部关注")})
        getShareToMeUserList({searchKey: this.state.content})
        this.props.changeGroup({groupId: "all", groupName: getLabel(384389,"全部关注")})
    }
}

export default TopSearchPanel